<template>
  <div class="bodyBox-style">
    <el-col
      v-for="(item, index) in iconList"
      :key="index"
      :lg="3"
      :md="3"
      :sm="6"
      :xl="3"
      :xs="12"
    >
      <el-card
        v-if="item.click && item.click === 'changeTheme'"
        class="icon-panel"
        shadow="hover"
        @click.native="dialogVisible = true"
      >
        <vab-icon :icon="item.icon" :style="{ color: item.color }" />
        <p>{{ item.title }}</p>
      </el-card>
      <el-card
        v-else-if="item.click && item.click === 'randomTheme'"
        class="icon-panel"
        shadow="hover"
        @click.native="randomTheme"
      >
        <vab-icon :icon="item.icon" :style="{ color: item.color }" />
        <p>{{ item.title }}</p>
      </el-card>
      <el-card
        v-else-if="item.click && item.click === 'handleMore'"
        class="icon-panel"
        shadow="hover"
        @click.native="dialogVisibleTwo = true"
      >
        <vab-icon :icon="item.icon" :style="{ color: item.color }" />
        <p>{{ item.title }}</p>
      </el-card>
      <vab-link v-else :to="item.link" target="router-link">
        <el-card class="icon-panel" shadow="hover">
          <vab-icon :icon="item.icon" :style="{ color: item.color }" />
          <p>{{ item.title }}</p>
        </el-card>
      </vab-link>
    </el-col>
    <!-- 弹窗 -->
    <el-dialog
      title="微信扫码进入小程序"
      :visible.sync="dialogVisible"
      width="15%"
    >
      <el-image
        class="image-style"
        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3950174433,268576240&fm=11&gp=0.jpg"
        fit="fill"
      ></el-image>
    </el-dialog>
    <!-- 公众号 -->
    <el-dialog
      title="微信扫码进入公众号"
      :visible.sync="dialogVisibleTwo"
      width="15%"
    >
      <el-image
        class="image-style"
        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3950174433,268576240&fm=11&gp=0.jpg"
        fit="fill"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTwo: false,
      // 卡片图标
      iconList: [
        {
          click: 'changeTheme',
          icon: 'brush-3-line',
          title: '小程序',
          link: '',
          color: '#69c0ff',
        },
        {
          click: 'handleMore',
          icon: 'wechat-pay-line',
          title: '微信公众号',
          link: '',
          color: '#1890FF',
        },
      ],
    }
  },
  methods: {
    changeTheme() {
      this.$baseEventBus.$emit('theme')
    },
    handleMore() {
      this.$baseAlert('11', '敬请期待！', () => {
        /* 可以写回调; */
      })
      // this.$baseAlert('敬请期待！')
    },
  },
}
</script>

<style lang="scss" scope>
.bodyBox-style {
  .el-dialog__body {
    text-align: center;
  }
  .image-style {
    width: 200px;
    height: 200px;
  }
  .icon-panel {
    height: 120px;
    text-align: center;
    cursor: pointer;

    &:hover {
      i {
        transform: scale(1.15);
      }
    }

    i {
      display: block;
      width: 50px;
      height: 50px;
      margin: auto;
      font-size: 40px;
      transition: all ease-in-out 0.3s;
    }

    p {
      margin-top: 10px;
    }
  }
}
</style>
